{% schema %}
  {
    "name": "Unmatched Comfort",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Title",
        "default": "Unmatched Comfort"
      },
    ],
    "blocks": [
      {
        "type": "slide",
        "name": "slide",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Slide Title",
            "default": "Soft, flexible temple arms for all-day comfort"
          },
          {
            "type": "radio",
            "id": "radio",
            "label": "Choose assets type",
            "options": [
              {
                "value": "video",
                "label": "video"
              },
              {
                "value": "image",
                "label": "image"
              }
            ],
          },
          {
            "type": "url",
            "id": "url",
            "label": "Video or Image Url",
          },
          {
            "type": "url",
            "id": "pc_url",
            "label": "Video or Image Url (PC)",
          },
          {
            "type": "url",
            "id": "xh_url",
            "label": "Virtualization Background Image Url",
          },
          {
            "type": "url",
            "id": "xh_pc_url",
            "label": "Virtualization Background Image PC Url",
          },
          {
            "type": "range",
            "id": "range",
            "label": "Select a range offset Left (@media screen < 768)",
            "min": -50,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Custom Swiper",
        "category": "Custom Sections"
      }
    ]
  }
{% endschema %}

{%- style -%}
  .box-{{ section.id }} {
    background: black; 
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .box-{{ section.id }}
  .swiper {
    width: 100%;
    overflow: visible;
    padding-top: 60px;
  }
  .box-{{ section.id }}
  .swiper .swiper-wrapper {
    position: relative;
  }

  .box-{{ section.id }}
  .swiper-slide {
    max-width: 1320px;
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box-{{ section.id }}
  .swiper-slide .slide_img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .box-{{ section.id }}
  .swiper-slide {
    width: 80%;
    display: flex;
    flex-direction: column;
    opacity: 0.4;
    transition: opacity 0.5s;
    z-index: 2;
  }
  
  .box-{{ section.id }}
  .swiper-slide.swiper-slide-active {
    opacity: 1;
    z-index: 1;
  }

  .box-{{ section.id }}
  .swiper-pagination-{{ section.id }} {
    position: absolute;
    top: auto !important;
    bottom: -30px !important;
    left: 50%;
    transform: translateX(-50%);
    width: 80% !important;
    max-width: 1320px;
    z-index: 1;
  }
  .box-{{ section.id }}
  .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #FFFFFF;
  }
  .box-{{ section.id }}
  .swiper-pagination-progressbar {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
  }
  .box-title-{{ section.id }} {
    width: 188px;
    font-family: HarmonyOS Sans;
    font-size: 36px;
    font-weight: bold;
    line-height: 120%;
    text-align: center;
    letter-spacing: -1.44px;
    color: #FFFFFF;
        z-index: 3;
    position: relative;
  }
  .swiper-item-title-{{ section.id }} {
    width: 100%;
    font-family: HarmonyOS Sans;
    font-size: 16px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: -1px;
    color: #FFFFFF;
    text-align: left;
    z-index: 2;
    
  }
  .swiper-item-card-{{ section.id }} {
    width: 100%;
    padding-bottom: 125%;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
  }

  .comfort-video-{{ section.id }} {
    position: relative;
    height: 100%;
  }
  .comfort-video-{{ section.id }}.video {
    height: 100%;
    clip-path: inset(0 round 20px);
  }
  .box-{{ section.id }}
  .swiper-slide.swiper-slide-active .swiper-item-xh-{{ section.id }} {
    opacity: 1;
  }
  .swiper-item-xh-{{ section.id }} {
    position: absolute;
    z-index: 0;
    left: 0;
    opacity: 0;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    top: -200px;
  }
  .fixed-{{ section.id }} {
    position: fixed;
    top: -34px;
    left: 0;
    width: 100vw;
  }
  .fixed-box-{{ section.id }} {
    position: relative;
    min-height: calc(100vh - 50px);
    padding-bottom: 50px;
    background: black;
    overflow: hidden;
  }
  .p-{{ section.id }} {
    position: relative;
    z-index: 1;
  }
  .swiper-slide:nth-child(2) .comfort-video-{{ section.id }}.video {
    left: -50%;
  }
  .swiper-slide:nth-child(3) .comfort-video-{{ section.id }}.video {
    left: -71%;
  }
{%- endstyle -%}

<div class="fixed-box-{{ section.id }}" id="fixed-box-{{ section.id }}">
  <div class="box-{{ section.id }} pb-7 pb-xl-0" id="box-{{ section.id }}">
  <div class="box-title-{{ section.id }} anim mx-auto">{{ section.settings.title }}</div>
  <div class="position-relative">
       <div class="swiper mySwiper-{{ section.id }}" id="mySwiper-{{ section.id }}">
    {%- assign slide_blocks = section.blocks | where: 'type', 'slide' -%}
    <div class="swiper-wrapper" style="transition-duration: 0ms; transition-delay: 0ms; transform: translate3d(27px, 0px, 0px);">
      {%- for block in slide_blocks -%}
        <div class="swiper-slide" style="margin-right: 24px">
          <div class="swiper-item-title-{{ section.id }} mb-4">{{ block.settings.title }}</div>
          <img class="d-xl-none swiper-item-xh-{{ section.id }}" src="{{ block.settings.xh_url }}" />
          <div class="swiper-item-card-{{ section.id }} position-relative">
            <div class="position-absolute top-0 start-0 end-0 bottom-0" style="z-index: 2;">
              {%- if block.settings.radio == 'image' -%}
                <img class="d-block d-xl-none comfort-video-{{ section.id }} slide_img" src="{{ block.settings.url }}" style="left: {{ block.settings.range }}" />
                <img class="d-none d-xl-block comfort-video-{{ section.id }} slide_img" src="{{ block.settings.pc_url }}" />
              {%- endif -%}
              {%- if block.settings.radio == 'video' -%}
                <video
                  loop 
                  playsinline 
                  muted
                  preload="auto"
                  class="comfort-video-{{ section.id }} video"
                  >
                  <source type="video/mp4" src="{{ block.settings.url }}">
                </video>
              {%- endif -%}
            </div>
          
          </div>
        </div>
      {%- endfor -%}
      </div> 
      <div class="swiper-pagination-{{ section.id }}"></div> 
    </div>
  </div>
    
 
  </div>
</div>


{%- style -%}
  @media screen and (min-width: 1280px) {
    .swiper-item-card-{{ section.id }} {
      width: 100%;
      height: 500px!important;
      border-radius: 20px;
      display: flex;
      justify-content: center;
      overflow: hidden;
      padding-bottom: 0;
    }
    .comfort-video-{{ section.id }} {
      left: 0!important;
      object-fit: cover;
      min-width: 100%;
    }
    .box-{{ section.id }} {
      padding-top: 160px;
    }
    .box-{{ section.id }}
    .swiper-pagination-{{ section.id }} {
      bottom: -60px!important;
    }
    .box-title-{{ section.id }} {
      width: auto;
      font-size: 80px;
    }
    .swiper-item-title-{{ section.id }} {
      font-size: 24px;
    }
    .swiper-item-xh-{{ section.id }} {
      left: 50%;
      top: -20%;
      transform: translateX(-50%);
    }
    .mySwiper-{{ section.id }} {
      overflow: hidden!important;
    }
  }

{%- endstyle -%}

<script>

    document.addEventListener('DOMContentLoaded', function () {
      
        const swiper = new Swiper(".mySwiper-{{ section.id }}", {
          slidesPerView: "auto",
          centeredSlides: true,
          spaceBetween: 24,
          pagination: {
            el: ".swiper-pagination-{{ section.id }}",
            type: "progressbar",
          },
          on:{
            slideChange: function(){
              const videos = document.querySelectorAll('.mySwiper-{{ section.id }} .swiper-slide .video');
              videos.forEach((item, index) => {
                if (item) {
                  if (index === this.activeIndex) {
                    item.pause();
                  } else {
                    item.play();
                  }
                }
              })
            },
          },
        });
                  const targetDiv = document.getElementById('fixed-box-{{ section.id }}');
            const targetDiv2 = document.getElementById('mySwiper-{{ section.id }}');
       let offsetTop = 160 - 56;
          function addClassWhenInCenter() {
            const box = document.querySelector("#box-{{ section.id }}")
            const rect = box.getBoundingClientRect();
            const xh = document.querySelectorAll(".swiper-item-xh-{{ section.id }}")

            xh.forEach(dom => {
              dom.style.height = rect.height + "px";
            })
            if (!targetDiv || !targetDiv2) return;
            if (window.innerWidth < 1280 ) {
              targetDiv.style.height = "auto"
              targetDiv2.style.position = "static";
              swiper.enable();
              return;
            };
            // swiper.disable();
             const targetRect2 = targetDiv2.getBoundingClientRect();
            targetDiv.style.height = targetRect2.height * 3 + "px";
            const viewportHeight = window.innerHeight;
            const targetRect = targetDiv.getBoundingClientRect();
            targetDiv2.style.maxWidth = targetRect.width + "px";
            const targetTop = targetRect.top;
            const targetBottom = targetRect.bottom;
            if (targetRect2.height < window.innerHeight - 56 * 2) {
              offsetTop = (window.innerHeight - 56 * 2 - targetRect2.height) / 2
            } else {
              offsetTop = 160 - 96 - 56;
            }
            if (targetTop <= -160-96+offsetTop) {
              targetDiv2.style.position = "fixed";
              targetDiv2.style.top = offsetTop + "px";
              swiper.setProgress(((targetTop + 160 +96 -offsetTop) * -1) / (targetRect2.height * 2) * 2, 0);
            } else {
               targetDiv2.style.position = "static";
               swiper.setProgress(0, 0);
            }
            if (targetRect.bottom <= window.innerHeight) {
              targetDiv2.style.position = "fixed";
              targetDiv2.style.top = offsetTop + targetRect.bottom - window.innerHeight + "px";
            } 
          }
          window.addEventListener('scroll', addClassWhenInCenter);
          addClassWhenInCenter();
      });

       
   
</script>